<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单留言板</title>
	<style>
		td{
			width: 100px;
			height: 50px;
		}
	</style>
</head>
<body>
	<table border="1px" cellspacing=0>
		<tr >
			<td>姓名</td>
			<td>内容</td>
			<td class="time">留言时间</td>
			<td>删除</td>
		</tr>
		<tr class="fuji">
			<td>王一</td>
			<td>今天天气真不错</td>
			<td>2018.11.29</td>
			<td><button onclick='remove(this)'>删除</button></td><!-- 给动态绑定参数 传入this  -->
		</tr>
	</table>
	姓名：<input type="text" class="bt2"><br>
	内容：<textarea name="" class="bt3" cols="30" rows="10"></textarea>
	<button class="bt1">发表</button>
	<script>
		var bt1=document.querySelector(".bt1");
		bt1.onclick=function(){
			var bt2=document.querySelector(".bt2")
			var bt3=document.querySelector(".bt3")
			var uname=bt2.value;
			var content=bt3.value;
			var createTr=document.createElement("tr")//建立<tr></tr>
			var createTd1=document.createElement("td")//建立第一个td
			createTd1.innerHTML=uname;//让第一个td的值为姓名
			createTr.appendChild(createTd1)//将td1添加到tr中

			var createTd2=document.createElement("td")
			createTd2.innerHTML=content;
			createTr.appendChild(createTd2)

			var createTd3=document.createElement("td")
			var D=new Date();
			createTd3.innerHTML=D.getFullYear()+"."+D.getMonth()+"."+D.getDate()+"."+D.getHours()+"."+("0"+D.getMinutes())+"."+D.getSeconds();
			createTr.appendChild(createTd3)

			var createTd4=document.createElement("td")
			createTd4.innerHTML="<button onclick='remove(this)'>删除</button>";
			createTr.appendChild(createTd4)
			//将tr添加到table中
			var table=document.getElementsByTagName('table')[0]
			table.appendChild(createTr)
			bt2.value=""//发表之后清空输入框内容
			bt3.value=""
		}
		function remove(dom){
			var par=dom.parentNode.parentNode;//找到要删除元素所在的tr
			var table=par.parentNode;//找到table
			table.removeChild(par)//删除要删除的元素
		}
	</script>
</body>
</html>